<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>15_首页</title>
    <link rel="stylesheet" href="./css/basic.css">
    <style>
      .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
      }
      .body{
        width: 100%;
        flex: 1;
        background-color: #fff;
        padding: 50px;
        box-sizing: border-box;
      }
      .header {
        width: 100%;
        background-color: pink;
      }

      .header ul {
        display: flex;
        justify-content: space-evenly;
      }
      .header ul li {
        width: 100%;
        height: 100px;
        line-height: 100px;
        font-size: large;
        text-align: center;
      }
      .body{
        display: flex;
        flex-direction: column;
            box-sizing: border-box;
        }
        .category{
          display: flex;
          flex-direction: row;
        }
    </style>
    </style>
  </head>
  <body>
    <div class="container">
      <div class="body">
        <!-- 顶部 -->
        <div class="swiper">
          <div class="title">
              <img class="search_img" src="./imgs/qznz.svg" alt="./" sizes="cover">
              <input type="text" class="textvalue" placeholder="搜索...">
          </div>
      </div>
      <!-- 分类 -->
      <div class="category">
          <div class="catediv">
              <img class="cateimg" src="./imgs/qznz.png" alt="">
              <p class="catetext">气质女装</p>
          </div>
          <div class="catediv">
              <img class="cateimg" src="./imgs/qznzp.png" alt="">
              <p class="catetext">气质女装</p>
          </div>
          <div class="catediv">
              <img class="cateimg" src="./imgs/qznz.png" alt="">
              <p class="catetext">气质女装</p>
          </div>
          <div class="catediv">
              <img class="cateimg" src="./imgs/qznz.png" alt="">
              <p class="catetext">气质女装</p>
          </div>
          <div class="catediv">
              <img class="cateimg" src="./imgs/qznz.png" alt="">
              <p class="catetext">气质女装</p>
          </div>
      </div>
      <!-- 特惠推荐 -->
       <div class="salelist">
          <div>
              <span class="span1">特惠推荐</span>
              <span class="span2">精选全攻略</span>
          </div>
          <div class="recommenddiv">
              <!-- 左 -->
              <div>
                  <img class="imgtitle" src="/imgs/qznz.png" alt="">
              </div>
              <!-- 右 -->
              <div class="rightbgc">
                  <div>
                      <img class="littleimg" src="./imgs/qznz.png" alt="">
                      <div><p class="moneyimg">￥9.9</p></div>
                  </div>
                  <div>
                      <img class="littleimg" src="./imgs/qznz.png" alt="">
                      <div><p class="moneyimg">￥9.9</p></div>
                  </div>
                  <div>
                      <img class="littleimg" src="./imgs/qznz.png" alt="">
                      <div><p class="moneyimg">￥9.9</p></div>
                  </div>
              </div>
          </div>
       </div>

       <!-- 爆款推荐 -->
        <div style="display: flex;">
          <div class="bottomleft">
              <p><span style="margin-right: 10px;">爆款推荐</span><span class="span2">最受欢迎</span></p>
              <div class="bottomtitle">
                  <div>
                      <img src="./imgs/qznz.png" alt="" style="width: 50px;">
                      <p style="color: pink;font-size: 12px;">￥30元</p>
                      <p class="text2" style="width: 35px;font-size: 10px;margin: 0 auto;">立减10</p>
                  </div>
                  <div>
                      <img src="./imgs/qznz.png" alt="" style="width: 50px;">
                      <p style="color: pink;font-size: 12px;">￥30元</p>
                      <p class="text2" style="width: 35px;font-size: 10px;margin: 0 auto;">立减10</p>
                  </div>
              </div>
            
            </div>
            <div class="bottomright">
              <p><span style="margin-right: 10px;">爆款推荐</span><span class="span2">最受欢迎</span></p>
              <div class="bottomtitle">
                  <div>
                      <img src="./imgs/qznz.png" alt="" style="width: 50px;">
                      <p style="color: pink;font-size: 12px;">￥30元</p>
                      <p class="text2" style="width: 35px;font-size: 10px;margin: 0 auto;">立减10</p>
                  </div>
                  <div>
                      <img src="./imgs/qznz.png" alt="" style="width: 50px;">
                      <p style="color: pink;font-size: 12px;">￥30元</p>
                      <p class="text2" style="width: 35px;font-size: 10px;margin: 0 auto;">立减10</p>
                  </div>
              </div>
            
            </div>
        </div>

      </div>
      <div class="header">
        <ul>
          <li index="0">首页</li>
          <li index="1">分类</li>
          <li index="2">购物袋</li>
          <li index="3">我的</li>
        </ul>
      </div>
    </div>

    <script>
      let allTabs = document.querySelectorAll(".header ul li");
      let bodyDom = document.querySelector(".body");
      allTabs.forEach((dom) => {
        dom.addEventListener("click", (event) => {
          // 将其他的样式都恢复正常
          // 取消其他颜色
          allTabs.forEach((item) => {
            item.style.backgroundColor = "transparent";
            item.style.color = "#000";
          });
          event.target.style.backgroundColor = "coral";
          event.target.style.color = "#fff";
          const flag = event.target.getAttribute("index");
          // if (flag === "0") {
          //   bodyDom.innerHTML = `<h1>首页</h1>`
          // } else if (flag === "1") {
          //   bodyDom.innerHTML = `<h1>分类</h1>`
          // } else if (flag === "2") {
          //   bodyDom.innerHTML = `<h1>购物袋</h1>`
          // } else {
          //   bodyDom.innerHTML = `<h1>我的</h1>`
          // }
        })
      })
    </script>
  </body>
</html>
